{% extends 'base.html' %}
{% load static %}

{% block title %}
    联系我们
{% endblock %}

{% block content %}
    <section class="main-content">
        <div class="container-xl py-5">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="text-center mb-5">
                        <h1 class="fw-bold">联系我们</h1>
                        <p class="text-muted fs-5">有任何问题或建议？请随时与我们联系。</p>
                    </div>

                    <!-- 联系信息 -->
                    <div class="row mb-5 g-4">
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm rounded h-100 text-center p-4">
                                <div class="mb-3">
                                    <i class="icon-envelope display-5 text-primary"></i>
                                </div>
                                <h5 class="fw-bold">邮箱</h5>
                                <p class="text-muted mb-0">hello@yourwebsite.com</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm rounded h-100 text-center p-4">
                                <div class="mb-3">
                                    <i class="icon-phone display-5 text-primary"></i>
                                </div>
                                <h5 class="fw-bold">电话</h5>
                                <p class="text-muted mb-0">+86 123 4567 8901</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-0 shadow-sm rounded h-100 text-center p-4">
                                <div class="mb-3">
                                    <i class="icon-map-pin display-5 text-primary"></i>
                                </div>
                                <h5 class="fw-bold">地址</h5>
                                <p class="text-muted mb-0">中国某城市创新科技园A座</p>
                            </div>
                        </div>
                    </div>

                    <!-- 联系表单 -->
                    <div class="mb-5">
                        <h2 class="h4 fw-bold mb-4">发送消息给我们</h2>
                        <form>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">姓名</label>
                                    <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label">邮箱</label>
                                    <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱">
                                </div>
                                <div class="col-12">
                                    <label for="subject" class="form-label">主题</label>
                                    <input type="text" class="form-control" id="subject" placeholder="请输入消息主题">
                                </div>
                                <div class="col-12">
                                    <label for="message" class="form-label">内容</label>
                                    <textarea class="form-control" id="message" rows="5" placeholder="请输入您的留言..."></textarea>
                                </div>
                                <div class="col-12 text-end">
                                    <button type="submit" class="btn btn-default">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 地图嵌入（可选） -->
                    <div class="mb-5">
                        <h2 class="h4 fw-bold mb-4">我们的位置</h2>
                        <div class="ratio ratio-16x9 rounded overflow-hidden shadow-sm">
                            <iframe src="https://maps.google.com/maps?q=shanghai&t=&z=13&ie=UTF8&iwloc=&output=embed"
                                    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
